<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
<%
	String bathPath = request.getContextPath();
	pageContext.setAttribute("bathPath", bathPath);
%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>门权限页面</title>
<link rel="stylesheet" href="${bathPath}/frame/layui/css/layui.css">
<link rel="stylesheet" href="${bathPath}/frame/static/css/style.css">
<link rel="icon" href="${bathPath}/frame/static/image/code.png">
<link type="text/css" rel="stylesheet" href="${bathPath}/css/page.css"/>
<script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="${bathPath}/js/ajaxSessionOut.js" ></script>
<!-- layer -->
<link type="text/css" rel="stylesheet" href="${bathPath}/js/layer/skin/layer.css"/>
<script type="text/javascript" src="${bathPath}/js/layer/layer.js" ></script>
<!-- validation -->
<script type="text/javascript" src="${bathPath }/js/jquery-validation/jquery.validate.js"></script>
<script src="${bathPath }/js/quickui/libs/js/form/validationRule.js" type="text/javascript"></script>
<script src="${bathPath }/js/quickui/libs/js/form/validation.js" type="text/javascript"></script>
<script src="${bathPath}/frame/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/html" id="checkboxTpl">
  <input type="checkbox" name="checkAll" lay-skin="primary" lay-filter="check" lay-event="ckOne" lay-from="">
</script>
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
    <span class="layui-btn layui-btn-sm" lay-event="quanxuan">全选</span>
    <span class="layui-btn layui-btn-sm" lay-event="quanqing">全清</span>
    <span class="layui-btn layui-btn-sm" lay-event="save">保存</span>

  </div>
</script>
<script type="text/html" id="barDemo2">
  <div class="layui-btn-container">
	<span onclick="fenpei()"  class="layui-btn layui-btn-xs">选择</span>
  </div>
</script>
<script type="text/html" id="switchTpl">
<select  autocomplete="off"  name="">
             <option value="-1">--请选择--</option>
			 <option value="1">时间段1</option>
</select>
</script>
<script>
//跳转到通行时间组页面   	
function fenpei(){
	//alert(111);
		   top.layer.open({
				  title:'通行时间组',
				  type: 2,
				  area:['460px', '400px'],
				  offset:['230px','550px'],
				  content: '${bathPath}/aDKPowerGroup/findtime.action'
				}); 
} 
  

var ckData = new Array();

Array.prototype.indexOf = function (val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) return i;
    }
    return -1;
};

Array.prototype.remove = function (val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};

var test1Table = new Array();

//门权限
layui.use([ 'table','layer', 'jquery', 'form'], function(){
	$ = layui.jquery;
	var table = layui.table;
	var form = layui.form ,layer = layui.layer;
  	var layTableId="test1";
  	//var flag=0; //判断表格是否在增加数据
	//返回data数据给表格
 	var laydata="";
 	//用于tab面板的js代码
 	 layui.use('element', function(){
 	  var $ = layui.jquery
 	  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
 	  
 	  //触发事件
 	  var active = {
 	    tabAdd: function(){
 	      //新增一个Tab项
 	      element.tabAdd('demo', {
 	        title: '新选项'+ (Math.random()*1000|0) //用于演示
 	        ,content: '内容'+ (Math.random()*1000|0)
 	        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
 	      })
 	    }
 	    ,tabDelete: function(othis){
 	      //删除指定Tab项
 	      element.tabDelete('demo', '44'); //删除：“商品管理”
 	      
 	      
 	      othis.addClass('layui-btn-disabled');
 	    }
 	    ,tabChange: function(){
 	      //切换到指定Tab项
 	      element.tabChange('demo', '22'); //切换到：用户管理
 	    }
 	  };

 	  //Hash地址的定位
 	 var layid = location.hash.replace(/^#test1=/, '');
 	  element.tabChange('test1', layid);
 	  
 	  element.on('tab(test1)', function(elem){
 	    location.hash = 'test1='+ $(this).attr('lay-id');
 	  });  
 	});  


 	 //监听头工具栏事件
   	table.on('toolbar(test1)', function(obj){
      switch(obj.event){
     case 'quanxuan':
     	//alert(222);
     	//selectAll();
     	/* debugger;
       var data = checkStatus.data;
       alert(JSON.stringify(data)); */
       //console.log($(".layui-unselect.layui-form-checkbox"));
       $(".layui-unselect.layui-form-checkbox").addClass("layui-form-checked");
       //获取所有的数据
      var all = table.cache.test1;//获取test1所有数据
      //console.log(table);
      for(var i = 0 ; i < all.length ; i++){
     	 if(ckData.indexOf(all[i])<0){    		 
     		 ckData.push(all[i]);
     	 }
      }
      console.log(ckData);

     break;
     case 'baocun':
    	 
       
     break;
     case 'ckOne':
         console.log("选择----");
         break;
     case 'quanqing':
     	 $(".layui-unselect.layui-form-checkbox").removeClass("layui-form-checked");
     	 var all = table.cache.test1;
     	 //清除所有数据
     	 for(var i = 0 ; i < all.length ; i++){
         	 ckData.remove(all[i]);
          }
     	 
          console.log(ckData);
     break;
   };  
   });
   
   	 $(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
   		  var index = $(this).attr('data-index');
   		  //console.log(index);
   		  var tableBox = $(this).parents('.layui-table-box');
   		 // var all = test1Table;
   		//  console.log(all);
   		  //console.log(tableBox);
   		  
   		  //存在固定列
   		  if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
   		   tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
   		  } else {
   		   tableDiv = tableBox.find(".layui-table-body.layui-table-main");
   		  }
   		  //console.log(tableDiv);
   		  var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
   		  if (checkCell.length>0) {
   		   checkCell.click();
   		  }
   		var all = table.cache.test1;
   		
   		var all =table.cache.test1;
     	console.log(ckData);
     	var ck = $(".layui-unselect.layui-form-checkbox");
     	console.log(ck);

   		
   		
   		if(index)
   		if(ckData.indexOf(all[index])<0){
   			ckData.push(all[index]);
   		}else{
   			ckData.remove(all[index]);
   			ckData.remove(all[index+all.lenght]);
   		}
   		
   		console.log(ckData);
   	 });
   	  
   	 $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
   	  e.stopPropagation();
   	 });
        	
  //监听行工具栏事件
	table.on('tool(test1)', function(obj){
		var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	  if(layEvent === 'upd'){
		upd(data.cardID);
	    } 
});
        	
/* //监听排序
  table.on('sort(test1)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  parm="sort="+obj.field+"&order="+ obj.type;
  //alert(parm);
  
  table.reload('test1', {
    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
    ,data:getdata(parm)
  });
});  */
		  
  //渲染表格
 table.render({
	    elem:'#test1'
	    ,id:layTableId
	    //,url:'${bathPath}/aDKPowerGroup/selectAlluser.action?groupID='+$("#groupID").val()
	    ,url:'${bathPath}/aDKController/selectAllu.action'
	 	//,data:getdata()
	    ,toolbar: '#toolbarDemo' 
	    ,cellMinWidth:80
	    ,width:740
	    ,size:'sm'//小表格
	    ,cols: [[
	    	/*  {type: 'checkbox', fixed: 'left',align:'center',width:'5%'}
			, */{type: 'numbers',title:'组名称', fixed: 'left',align:'center',width:'10%'}
	      	,{field: 'location',title:'控制器', fixed: 'left',align:'center',width:'15%'}
	      	,{field: 'dooraddr',title:'门地址', fixed: 'left',align:'center',width:'15%'}
	      	,{field: 'name',title:'门名称', fixed: 'left',align:'center',width:'10%'}
	      	,{field: '', title: '授权',fixed: 'left',align:'center',width:'10%',templet: '#checkboxTpl', unresize: true}
	      	/*  ,{field: '', title: '通行时间组',fixed: 'left',align:'center',width:'25%'}  */
	      	 ,{field:'timename', title: '通行时间组',width:'30%',templet: '#switchTpl'}
	      	/*  ,{field: '', title: '操作',fixed: 'left',align:'center',width:'14.5%',toolbar: '#barDemo2'}   */
	    ]]
	    ,page: true //开启分页
	    ,limit:10   //默认十条数据一页
        ,limits:[10,20,30,40,100]  //数据分页条
	  }); 
});



</script>
<style type="text/css">

	.my-skin .layui-layer-btn a {
	background-color:#009688;
}

	body{padding: 0px 0px;}
	.hide{display:none}
</style>
<style type="text/css">

/* 防止下拉框的下拉列表被隐藏---必须设置--- */        
.layui-table-cell {            overflow: visible !important;        } 
/* 使得下拉框与单元格刚好合适 */       
td .layui-form-select{
	margin-top: -10px;
	margin-left: -15px;
	margin-right: -15px;
}   


</style>
</head>
<body>
<form class="layui-form layui-form-pane"  id="myform" method="post" action="" showOnMouseOver="false"> 
<input type="hidden" id="groupID" name="groupID" value="${power.groupID}" />
<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">门权限</li>
    <li>电梯权限</li>
  </ul>
  <div class="layui-tab-content" style="height:387px;">
    <!--门权限 -->
    <div class="layui-tab-item layui-show">
      <!-- <table class="param_table" style="border:1px solid red;border-collapse:separate; border-spacing:0px 10px; width:680px; margin-left:7px;">
      </table> -->
		
		<button class="layui-btn site-demo-active layui-btn-sm get-checked" style="margin-top:10px; float:right; margin-right:10px;">全选</button>
		<button class="layui-btn site-demo-active layui-btn-sm get-checked" style="margin-top:10px; float:right;">保存</button>
		<button class="layui-btn site-demo-active layui-btn-sm get-checked" style="margin-top:10px; float:right;">全清</button>
		
		<table class="layui-hide"  id="test1"  lay-filter="test1"></table>
		<!-- <input class="layui-btn site-demo-active layui-btn-sm" style="margin-left:305px;" type="button" onclick="saveBtu()" value="保 存"  class="primary"/> -->
    </div>
    <!--电梯权限 -->
    <div class="layui-tab-item">
    	<div>
      		<div id="kai" style="width:330px; height:300px;background-color:white;opacity:0.1;margin-top:50px;z-index:9999; position:fixed;" ></div>
	      		<table  class="param_table" style="border-collapse:separate; border-spacing:0px 3px; width:325px; margin-left:7px;">
	      			<span>哈哈哈哈哈哈</span>
	      		</table>
    		</div>
    </div>
</div>
</form>
</body>
</html>